<template>
  <div class="common szui">
    <div class="top">
      <div class="logo">
        <img src="http://www.shuyuhng.top:9999/img/szui.png" alt />
        <img src="http://www.shuyuhng.top:9999/img/szuiz.png" alt class="zi" />
        <div class="right topwenzi" style="padding:0">
          <h4>欢迎测试 Szui/书锥 组件库</h4>
        </div>
      </div>
    </div>
    <div class="left">
      <div class="left-item">
        <div :class="{'active':currName == item.key}" v-for="(item,i) in btns" :key="i">
          <a @click="goCom(item.key)">{{item.name}}</a>
        </div>
      </div>
    </div>
    <div class="right" id="rightEl">
      <div class="zujianitem tis" ref="npmanzhaung" name="安装">
        <h3 class="title">安装Szui组件</h3>
        <!-- 显示代码的区域 -->
        <div class="daima">
          <sz-Code code="npm i sz-ui" />
        </div>
      </div>
      <div class="zujianitem tis" ref="quanjuyinru" name="全局引入">
        <h3 class="title">全局引入</h3>
        <!-- 显示代码的区域 -->
        <div class="daima">
          <sz-Code :code="`
  // 引入sz-ui组件
  import Szui from 'sz-ui'
  // 引入css文件
  import  'sz-ui/dist/sz-ui.css'
  // 使用sz-ui
  Vue.use(Szui)
      `" />
        </div>
      </div>
       <div class="zujianitem tis" ref="anxuyinru" name="按需引入">
        <h3 class="title">按需引入</h3>
        <!-- 显示代码的区域 -->
        <div class="daima">
          <sz-Code :code="`
  // 引入某组件
  import {sz-Sweiper} from 'sz-ui'
  // 引入css文件
  import  'sz-ui/dist/sz-ui.css'
  // 使用某个组件
  Vue.use(sz-Sweiper)`" />
        </div>
      </div>
      <div class="zujianitem" ref="aa" name="Sweiper 轮播">
        <Sweiper />
      </div>
      <div class="zujianitem" ref="bb" name="Slide 滑动检测">
        <Slide />
      </div>
        <div class="zujianitem" ref="showCode" name="showCode 代码片段">
        <showCode />
      </div>
       <div class="zujianitem tis">
        <h3 class="title">贡献合伙人：</h3>
        <!-- 显示代码的区域 -->
        <div class="daima" style="height:400px">
          <sz-Code :code="partner" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sweiper from "./views/Sweiper";
import Slide from "./views/Slide";
import showCode from "./views/showCode";
export default {
  components: {
    Sweiper,
    Slide,
    showCode
  },
  data() {
    return {
      currName: "",
      pathArr: [],
      btns: [],
      partner:`
      舒榆衡,
      `
    };
  },
  methods: {
    goCom(key) {
      this.currName = key;
      // 去对应的位置
      document.getElementById("rightEl").scrollTop =
        this.$refs[key].offsetTop - 94;
    }
  },
  created() {},
  mounted() {
    let flage = true;
    for (const key in this.$refs) {
      if (flage) {
        flage = false;
        this.currName = key;
      }
      let btnObj = {
        key: key,
        name: this.$refs[key].getAttribute("name")
      };
      this.btns.push(btnObj);
    }
    let El = document.getElementById("rightEl");
    El.onscroll = () => {
      for (const key in this.$refs) {
        let top = this.$refs[key].offsetTop - 94;
        let winTop = El.scrollTop;
        if (winTop <= 0) return (this.currName = key);
        if (top <= winTop) this.currName = key;
      }
    };
  }
};
</script>
<style lang="scss">
html,
body {
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
  a {
    text-decoration: none;
  }
}
div {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.szui {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-top: 64px;
  position: relative;
}
.common {
  width: 80%;
  margin: 0 auto;
  min-width: 1200px;
  position: relative;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}
.top {
  // float: left;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: rgba(92, 92, 141, 0.8);
  overflow: hidden;
  .logo {
    user-select: none;
    height: 100%;
    position: relative;
    > img {
      height: 107px;
      position: absolute;
      transform: translateY(-20%); /*2d移动*/
      &.zi {
        height: 140px;
        left: 68px;
        top: -5px;
      }
    }
  }
}
// 左右布局
.left {
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    transition: all 0.3s;
  }
  &:hover::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }
  box-shadow: 14px 0px 12px 1px #7d7da4;
  width: 20%;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  float: left;
  overflow: auto;
  .left-item {
    color: transparent;
    padding-top: 20px;
    min-height: 100.1%;
    div {
      line-height: 40px;
      & > a {
        // text-shadow: 1px 1px 1px  red;
        color: #455a64;
        font-size: 14px;
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-left: 35px;
        transition: font-size 0.3s;
        cursor: pointer;
        &:hover {
          color: #7d7da4;
          font-size: 16px;
        }
      }
    }
  }
}
.right {
  width: 80%;
  height: 100%;
  float: right;
  overflow: auto;
}
.zujianitem {
  &.tis {
    padding: 0 5%;
    text-align: left;
  }
  text-align: center;
  margin: 30px 0;
  .sz-Exhibition {
    display: inline-block;
    width: 90%;
  }
}
.active a {
  color: #f92665 !important;
  font-size: 18px !important;
}
.topwenzi {
  color: white;
}

*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 6px;
}
.daima {
  background-color: #272822;
  border: 2px solid #7b7ba2;
  border-radius: 5px;
}
</style>